<template>
  <div class="app-container">
    <el-loading :visible.sync="loading" fullscreen></el-loading>
      <!-- 返回按钮 -->
    <div class="back-button">
      <el-button icon="el-icon-back" @click="goBack">返回</el-button>
    </div>
    <!-- 页面标题 -->
    <div class="page-title">
      <h2>{{ title }}</h2>
    </div>

    <!-- 基本信息区域 -->
    <el-card class="box-card">
      <div class="detail-info">
        <div class="info-item">
          <span class="label">招标单位：</span>
          <span class="content">{{ tenderInfo.iUnit || '暂无内容'}}</span>
        </div>
        <div class="info-item">
          <span class="label">招标编号：</span>
          <span class="content">{{ tenderInfo.iNumber || '暂无内容'}}</span>
        </div>
        <div class="info-item">
          <span class="label">公告截止时间：</span>
          <span class="content">{{ tenderInfo.endTime  || '暂无内容' }}</span>
        </div>
      </div>
    </el-card>

    <!-- 标签页切换 -->
    <el-tabs v-model="activeTab" class="detail-tabs">
      <el-tab-pane label="招标公告" name="notice">
        <div class="tab-content">
          <h3>一、项目概况与采购范围</h3>
          <div class="content-block">
            <p>1、项目名称：{{ tenderInfo.iName || '暂无内容'}}</p>
            <p>2、项目编号：{{ tenderInfo.iNumber || '暂无内容'}}</p>
            <p>3、采购方式：{{ tenderInfo.iWay === 1 ? '公开' : '邀请' }}</p>
            <p>4、供货地点：{{ tenderInfo.address || '暂无内容'}}</p>
          </div>

          <h3>二、供应商资格要求</h3>
          <div class="content-block">
            <div class="requirement-item">
              <p>1、经营范围：{{ supplierInfo.h_range || '暂无内容'}}</p>
              <p>2、公司简历：{{ supplierInfo.h_desc || '暂无内容'}}</p>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="中标候选人公示" name="candidates">
        <div class="candidate-notice">
          <h2 class="notice-title">中标候选人公示</h2>
          <div class="notice-content">
            <p class="notice-paragraph">
              根据招标文件的评标办法和标准，经评标委员会评审推荐，现将中标候选人公示如下：
            </p>

            <h3 class="section-title">一、项目概况</h3>
            <p class="notice-paragraph">
              招标编号：{{ tenderInfo.iUnit|| '暂无内容' }}<br>
              招标单位：{{ tenderInfo.iNumber || '暂无内容'}}
            </p>

            <h3 class="section-title">二、中标候选人排序及得分</h3>
            <p class="notice-paragraph">
              <strong>第一中标候选人：</strong><br>
              供应商名称：{{ supplierInfo.h_name || '暂无内容'}}<br>
              最终报价：{{ candidateInfo.finalOffer|| '暂无内容' }}元<br>
              最终得分：{{ candidateInfo.finalScore || '暂无内容'}}分<br>
              排名：{{ candidateInfo.ranking || '暂无内容'}}<br>
              联系人：{{ candidateInfo.ywName || '暂无内容'}}<br>
              联系电话：{{ candidateInfo.ywPhone || '暂无内容'}}<br>
              联系邮箱：{{ candidateInfo.ywMailBox || '暂无内容'}}
            </p>

            <h3 class="section-title">三、公示时间</h3>
            <p class="notice-paragraph">
              公示发布时间：{{ candidateInfo.gsResDate }}<br>
              公示期限：自本公示发布之日起3个工作日
            </p>

            <h3 class="section-title">四、异议与投诉</h3>
            <p class="notice-paragraph">
              投标人或者其他利害关系人对评标结果有异议的，应当在中标候选人公示期间提出。异议或投诉必须以书面形式提出，并提供必要的证明材料。
            </p>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="中标结果公示" name="results">
        <div class="result-notice">
          <h2 class="notice-title">中标结果公示</h2>
          <div class="notice-content">
            <p class="notice-paragraph">
              根据招标文件规定，经评标委员会评审确定，现将中标结果公示如下：
            </p>

            <h3 class="section-title">一、招标项目概况</h3>
            <p class="notice-paragraph">
              招标项目编号：{{ tenderInfo.iUnit || '暂无内容'}}<br>
              供应商名称：{{ supplierInfo.h_name || '暂无内容'}}
            </p>

            <h3 class="section-title">二、中标信息</h3>
            <p class="notice-paragraph">
              公示发布时间：{{ candidateInfo.gsResDate || '暂无内容' }}
            </p>

            <h3 class="section-title">三、公示内容</h3>
            <p class="notice-paragraph">
              {{ resultsInfo.result_desc || '暂无内容'}}
            </p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {getResultsByGsId} from "@/api/system/results";
import {getTender,getNoiceList,getBidWinningCandidateAndSended} from "@/api/system/purchase";
import{getAsSupplier}from '@/api/system/supplier';
export default {
  name: 'WhResultsDetail',
  data() {
    return {
      title: '年度采购计划',
      // 存储所有招标信息
      tenderInfo: {
        iNumber: '',
        i_unit: '',
        end_ime: '',
        iName: '',
        address: '',
        iWay:0,
      },
      // 存储所有供应商信息
      supplierInfo: {
        h_range: '',
        h_desc: '',
        h_name: '',
      },
      // 存储所有中标候选人信息
      candidateInfo: {
        finalOffer: '',
        finalScore: '',
        ranking: '',
        ywName: '',
        ywPhone:'',
        ywMailBox:'',
        gsResDate:''
      },
      // 存储所有中标结果信息
      resultsInfo: {
        result_desc: null,
      },
      loading: false,
      activeTab: 'notice',
    }
  },
  created(){
    
    const { iNumber, hid, gs_id } = this.$route.query;
    if (!iNumber || !hid || !gs_id) {
      this.$message.error('缺少必要的参数');
      return;
    }
  this.getProjectInfo();
  },
  methods: {
    getProjectInfo() {
      const { iNumber, hid, gs_id } = this.$route.query;
      this.loading = true
      Promise.all([
        this.getTenderInfo(iNumber),
        this.getSupplierInfo(hid),
        this.getResultsInfo(gs_id),
        this.getCandidateInfo(iNumber)
      ]).catch(error => {
        console.error('Error:', error);
        this.$message.error('获取数据失败');
      }).finally(() => {
        this.loading = false;
      });
    },
    /**
     * 招标公告
     * @param iNumber 招标项目编号
     */
    getTenderInfo(iNumber) {
      return getTender(iNumber).then(response => {
          if (response.code === 200) {
            this.tenderInfo = { ...this.tenderInfo, ...response.data };
          }
          return response;
      });
    },
    /**
     * 供应商信息
     * @param hid 供应商id
     */
    getSupplierInfo(hid) {
      return getAsSupplier(hid).then(response => {
          if (response.code === 200) {
            this.supplierInfo = { ...this.supplierInfo, ...response.data };
          }
          return response;
      });
    },
    /**
     * 中标候选人信息
     * @param iNumber 招标项目编号
     */
    getCandidateInfo(iNumber) {
      return getBidWinningCandidateAndSended(iNumber).then(response => {
          if (response.code === 200) {
            const candidate = response.data.bidWinningCandidateList[0];
            const results = response.data.results[0];
            if (candidate) {
              this.candidateInfo.finalOffer = candidate.finalOffer;
              this.candidateInfo.finalScore = candidate.finalScore;
              this.candidateInfo.ranking = candidate.ranking;
              this.candidateInfo.ywName = results.ywName;
              this.candidateInfo.ywPhone = results.ywPhone;
              this.candidateInfo.ywMailBox = results.ywMailBox;
              this.candidateInfo.gsResDate = results.gsResDate;
            } else {
              this.$message.error('未找到中标候选人信息');
            }
          }
          return response;
      });
    },
    /**
     * 中标结果id
     * @param gs_id 中标结果id
     */
    getResultsInfo(gs_id) {
      return getResultsByGsId(gs_id).then(response => {
          if (response.code === 200) {
            this.resultsInfo = { ...this.resultsInfo, ...response.data };
          }
          return response;
      });
    },
    /**
     * 返回按钮
     */
    goBack() {  
      window.history.back();  
      setTimeout(() => {
        window.location.reload();
      }, 100);
    },
  },
  beforeCreate(){
    this.$store.dispatch("app/toggleSideBarHide", true);
    document.querySelector('.navbar').style.display = 'none';
    document.querySelector('.tags-view-container').style.display = 'none';
    
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.page-title {
  text-align: center;
  margin-bottom: 20px;
}

.detail-info {
  padding: 20px;
}

.info-item {
  margin-bottom: 15px;
  line-height: 24px;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  color: #606266;
}

.detail-tabs {
  margin-top: 20px;
}

.tab-content {
  padding: 20px;
}

.content-block {
  margin: 15px 0;
  line-height: 1.8;
}

.requirement-item {
  margin-bottom: 10px;
}

h3 {
  margin: 20px 0 10px;
  font-weight: bold;
  color: #303133;
}
/* 在src/assets/styles/candidate-notice.css中 */
.candidate-notice {
padding: 20px;
line-height: 1.8;
color: #333;
}

.notice-title {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 30px;
}

.notice-content {
padding: 0 20px;
}

.section-title {
font-size: 16px;
font-weight: bold;
margin: 25px 0 15px;
color: #303133;
}

.notice-paragraph {
margin-bottom: 15px;
text-indent: 2em;
line-height: 2;
}

.notice-paragraph strong {
font-weight: bold;
color: #303133;
}
/* 在src/assets/styles/candidate-notice.css中 */
.candidate-notice {
padding: 20px;
line-height: 1.8;
color: #333;
}

.notice-title {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 30px;
}

.notice-content {
padding: 0 20px;
}

.section-title {
font-size: 16px;
font-weight: bold;
margin: 25px 0 15px;
color: #303133;
}

.notice-paragraph {
margin-bottom: 15px;
text-indent: 2em;
line-height: 2;
}

.notice-paragraph strong {
font-weight: bold;
color: #303133;
}
</style>